<script setup>
import { onMounted, ref } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import { myOrder } from '@/constants/mock.js';

const key = ref(1);
function handleChange(value) {
	key = value;
};
function navigateToHome() {
  uni.navigateBack();
};
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToHome" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>租车订单</text>
    </div>
		<div class="tab-container">
			<div :class="{'active': key === 1}" @click="key = 1">待支付</div>
			<div :class="{'active': key === 2}" @click="key = 2">进行中</div>
			<div :class="{'active': key === 3}" @click="key = 3">已完成</div>
		</div>
		<div>
			<div v-if="key === 1">
				<div v-for="order in myOrder" :key="order.number">
				  <div class="unpay-order-container">
				  	<div class="title-container gap">
				  		<div class="title">车牌号：川AXXXXXXXXX</div>
				  		<div class="fee">2500元</div>
				  	</div>
				  	<div class="title gap">车型：XXXX</div>
				  	<div class="title-container">
				  		<div class="status">待支付</div>
				  		<button class="btn">前往支付</button>
				  	</div>
				  </div>
				</div>
			</div>
			<div v-else-if="key === 2">
				<div v-for="order in myOrder" :key="order.number">
				  <div class="unpay-order-container">
				  	<div class="title-container gap">
				  		<div class="title">车牌号：川AXXXXXXXXX</div>
				  		<div class="fee">2500元</div>
				  	</div>
				  	<div class="title gap">车型：XXXX</div>
				  	<div class="title-container">
				  		<div class="status">进行中</div>
				  		<div class="status">到期日期：XXXX年x月x日</div>
				  	</div>
				  </div>
				</div>
			</div>
			<div v-else-if="key === 3">
				<div v-for="order in myOrder" :key="order.number">
				  <div class="unpay-order-container">
				  	<div class="title-container gap">
				  		<div class="title">车牌号：川AXXXXXXXXX</div>
				  		<div class="fee">2500元</div>
				  	</div>
				  	<div class="title gap">车型：XXXX</div>
				  	<div class="title-container">
				  		<div class="status">已完成</div>
				  		<div class="complete-order">
								<div class="status">租期：XXXX年x月x日</div>
								<div class="status">至XXXX年x月x日</div>
							</div>
				  	</div>
				  </div>
				</div>
			</div>
		</div>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}

.tab-container {
	display: flex;
	margin-top: 10px;
	margin-bottom: 28px;
	gap: 28px;
}

.tab-container > div {
	margin-right: 28px;
}

.active {
	border-bottom: 2px solid #000;
}

.unpay-order-container {
	margin-bottom: 16px;
	height: 126px;
	padding: 16px 24px 19px 17px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
}
.title-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.title {
	font-size: 12px;
}
.fee {
	font-size: 16px;
	font-weight: 500;
}
.gap {
	margin-bottom: 15px;
}
.btn {
	width: 160px;
	height: 31px;
	
	display: flex;
	justify-content: center;
	align-items: center;
		
	font-size: 16px;
	color: #fff;
	
	background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
	border: none;
	outline: none;
	border-radius: 10px;
	margin-right: 0;
}
.complete-order {
	position: relative;
	top: -12px;
}
</style>
